import React, { Component } from 'react'
import axios from "axios"
import BScroll from "better-scroll"
import { Image } from 'react-vant';
export class Scroll extends Component {
    constructor(props){
        super(props)
        this.state={
            list:[]
        }
    }
    componentDidMount(){
        axios.get("/list").then(res=>{
            this.setState({
                list:res.data
            },()=>{
                this.bs=new BScroll('.scroll')
            })

        })

    }
    componentDidUpdate(){
        this.bs&&this.bs.refresh()
        
    }
    componentWillUnmount(){
        this.bs&&this.bs.destroy()

    }
    




  render() {
      const {list}=this.state
      const {color,background}=this.props
    return (
      <div className='scroll'>
          <ul>
            {list.length ?
            list.map((item)=>{
                return <li key={item.id}> 
              <Image
            width="100px"
            height="100px"
            src={item.img}
            lazyload={true}//懒加载
            errorIcon={<div style={{ fontSize: 14 }}>加载失败</div>}
          />
                <p style={{color:background}}>{item.title}</p> 
                <p><b style={{color:color}}> {item.price}</b></p></li>
            }) : '在加载中'
            
  }
          </ul>
      </div>
    )
  }
}

export default Scroll